<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 员工管理 </el-breadcrumb-item>
                <el-breadcrumb-item>员工详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="employee" label-width="80px">
                    <el-divider content-position="left">基础信息</el-divider>

                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="employee.name" disabled></el-input>
                    </el-form-item>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="员工号" prop="tellerId">
                                <el-input v-model="employee.tellerId" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="职位" prop="position">
                                <el-select v-model="employee.pid" clearable placeholder="职位" disabled>
                                    <el-option key="00" value="00" label="暂无职位"></el-option>
                                    <el-option v-for="(item, index) in positions" :key="index" :label="item.name" :value="item.id">
                                </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="身份证号" prop="idCard" style="width: 70%">
                        <el-input v-model="employee.idCard" onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')" disabled> </el-input>
                    </el-form-item>

                    <el-form-item label="年龄" prop="age" style="width: 40%">
                        <el-input v-model="employee.age" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="学历" prop="education">
                        <el-select v-model="employee.education" clearable placeholder="学历" disabled>
                            <el-option v-for="item in educations" :key="item" :label="item" :value="item"> </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="性别" prop="sex">
                        <el-radio v-model="employee.sex" label="01" border size="medium" disabled>男</el-radio>
                        <el-radio v-model="employee.sex" label="00" border size="medium" disabled>女</el-radio>
                    </el-form-item>

                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker
                            v-model="employee.birthday"
                            type="date"
                            format="yyyy-MM-dd"
                            placeholder="选择日期"
                            :picker-options="pickerOptions"
                            @change="setAge"
                            disabled
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-divider content-position="left">联系方式</el-divider>

                    <el-form-item label="手机号码" prop="phone" style="width: 50%">
                        <el-input v-model="employee.phone" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email" style="width: 60%">
                        <el-input v-model="employee.email" disabled></el-input>
                    </el-form-item>

                    <el-divider content-position="left">家庭信息</el-divider>

                    <el-form-item label="家人姓名" prop="family" style="width: 40%">
                        <el-input v-model="employee.family" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="fphone" style="width: 50%">
                        <el-input v-model="employee.fphone" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="家庭住址" prop="address">
                        <el-input v-model="employee.address" disabled></el-input>
                    </el-form-item>

                    <el-divider content-position="left">员工状态</el-divider>

                    <el-form-item label="状态" prop="status">
                        <el-switch
                            v-model="employee.status"
                            active-value="01"
                            active-text="正常"
                            inactive-value="00"
                            inactive-text="离职"
                            disabled
                        ></el-switch>
                    </el-form-item>
                    <el-divider content-position="left">用户状态</el-divider>
                    <el-form-item>
                        <h4>{{ this.employee.uStatus == '00' ? '未开通' : '已开通' }}</h4>
                    </el-form-item>

                     <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    var d = new Date();
                    var legalTime = d.getFullYear() - 18 + '-' + (d.getMonth() + 1) + '-' + d.getDate();
                    return time.getTime() > new Date(legalTime);
                }
            },
            educations: [],
            positions: [],
            id: this.$route.query.id,
            employee: {},
            condition: {
                did: '00',
                status: '01'
            }
        };
    },
    created: function () {
        this.initEmployee();
        this.getEducations();
        this.getPositions();
    },
    methods: {
        async initEmployee() {
            var d = await this.$http.get('/employee/' + this.id);
            if (d.code == 200) {
                this.employee = d.data;
                console.log(this.employee.uStatus);
            }
        },

        setAge(time) {
            var nowTime = new Date();
            var age = nowTime.getFullYear() - time.getFullYear();
            if (time.getMonth() < nowTime.getMonth()) {
                this.employee.age = age;
            } else if (time.getMonth() > nowTime.getMonth()) {
                this.employee.age = age - 1;
            } else if (time.getDate() > nowTime.getDate()) {
                this.employee.age = age - 1;
            } else {
                this.employee.age = age;
            }
        },
          goback(){
            this.$router.go(-1);
        },

        getEducations() {
            this.educations = JSON.parse(window.sessionStorage.getItem('education'));
        },

        async getPositions() {
            this.condition.did = '';
            this.condition.status = '01';
            var d = await this.$http.post('/positionMap', this.condition);
            if (d.code == 200) {
                this.positions = d.data;
            }
        }
    }
};
</script>